import ProCard from '@ant-design/pro-card';
import RcResizeObserver from 'rc-resize-observer';
import { useEffect, useState } from 'react';
import style from './index.less';
import { Skeleton, Spin } from 'antd';
import { preview } from '@/services/api/api-user-analysis';
import Meta from 'antd/lib/card/Meta';
import { HomeOutlined, UserOutlined } from '@ant-design/icons';
interface PreviewModuleProps { }

const PreviewModule: React.FC<PreviewModuleProps> = ({ }) => {
  const [responsive, setResponsive] = useState(false);
  const categoryItem = [
    {
      name: "机关部门",
      class: style.机关部门,
    },
    {
      name: "中小学",
      class: style.中小学
    },
    {
      name: "驻区单位",
      class: style.驻区单位
    },
    {
      name: "镇街",
      class: style.镇街
    },
    {
      name: "国有企业",
      class: style.国有企业
    },
    {
      name: "科研平台",
      class: style.科研平台
    },
    {
      name: "高校",
      class: style.高校
    },
    {
      name: "企业",
      class: style.企业
    },
    {
      name: "幼儿园",
      class: style.幼儿园
    },
  ]
  /**
   * 本月选题计划(单位数据)
   */
  const [data, setDataState] = useState<UserAnalysisData.Preview[]>([]);

  useEffect(() => {
    loadData();
  }, []);

  /**
   * 本月选题计划
   */
  const loadData = async () => {
    try {
      const response = await preview();
      if (response.code === 0) {
        setDataState(response.data);
      }
    } catch (error) { }
  };

  return (
    <>
      <RcResizeObserver
        key="resize-observer"
        onResize={(offset) => {
          setResponsive(offset.width < 596);
        }}
      >
        {data.length <= 0 ? <Skeleton active > </Skeleton> : <></>}
        {data?.map((item, index) => (
          <>
            <ProCard
              title={
                <>
                  {item.title}
                </>}
              direction={'row'}
              className={style.userData}
            >
              <ProCard
                style={{
                  borderRadius: 5
                }}
                bodyStyle={{
                  width: '10vw',
                }}
                className={index === 0 ? style.totalUser1 : style.totalUser2}
                onClick={() => {
                }}
              >
                <Meta
                  style={{ textAlign: 'center' }}
                  title={<>
                    <div style={{ display: 'flex', justifyContent: 'center' }}>
                      <div>
                        {index === 0 ? (
                          <HomeOutlined
                            style={{
                              color: 'white',
                              fontSize: 25,
                            }}
                          />
                        ) : (
                          <UserOutlined
                            style={{
                              color: 'white',
                              fontSize: 25,
                            }}
                          />
                        )}
                      </div>
                      <h2 style={{ color: 'white', marginLeft: 10, fontSize: 18 }}>全部{item.item.title}</h2>
                    </div>
                  </>}
                  description={<h1 style={{ color: 'white' }}>{item.item.count}</h1>}
                />
              </ProCard>
              {item.list?.map((child) => {
                return categoryItem.map((item: any) => {
                  if (item.name === child.title) {
                    return (
                      <>
                        <ProCard
                          bodyStyle={{
                            paddingLeft: '0px',
                            paddingRight: '0px',
                            height: 100,
                          }}
                          layout='center'
                          direction="column"
                          className={item.class}
                          style={{ marginLeft: 10 }}
                        >
                          <h4>{child.title}</h4>
                          <h3 style={{ color: '#5FA2F0', marginTop: 0 }}>{child.count}</h3>
                        </ProCard>
                      </>
                    )
                  }
                })
              })}
            </ProCard>
            <br />
          </>
        ))}
      </RcResizeObserver>
    </>

  );
};

export default PreviewModule;
